<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header" class="query-area">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="90px" style="height:auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="订单编号" prop="orderNo">
							<el-input v-model="queryForm.orderNo" placeholder="请输入订单编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="商品SKU条码" prop="productBarCode" label-width="110px">
							<el-input type="text" v-model="queryForm.productBarCode" placeholder="请输入SKU条形码"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="会员手机号" prop="userPhone"label-width="100px">
							<el-input v-model="queryForm.userPhone" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="订单状态" prop="pickupStatus">
							<el-select v-model="queryForm.pickupStatus" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="待提货" value="2"></el-option>
								<el-option label="已完成" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="5">
						<el-form-item label="时间类型" prop="timeType">
							<el-select v-model="queryForm.timeType" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="下单时间" value="1"></el-option>
								<el-option label="支付时间" value="2"></el-option>
								<el-option label="提货时间" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="选择时间范围" prop="time" label-width="110px">
							<el-date-picker
								v-model="time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								align="right"
								:default-time="['00:00:00', '23:59:59']"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('queryForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<template>
			<el-table :data="tableData" border style="width: 100%;margin-bottom: 20px;">
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="orderNo" label="订单编号"></el-table-column>
				<el-table-column prop="pickupName" label="所属门店" width="150"></el-table-column>
				<el-table-column prop="consigneeName" label="会员昵称" width="140"></el-table-column>
				<el-table-column prop="consigneePhone" label="会员手机号" width="140"></el-table-column>
				
				<el-table-column prop="couponQuantityTotal" label="订单金额(券)" width="120" align="center"></el-table-column>
				
				<el-table-column prop="pickupStatus" label="订单状态" width="140" align="center">
					<template slot-scope="scope">
						<el-tag type="warning" size="mini" v-if="scope.row.pickupStatus < 3">待提货</el-tag>
						<el-tag type="success" size="mini" v-else-if="scope.row.pickupStatus == 3">已完成</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="下单时间" :formatter="forDate" width="180"></el-table-column>
				
				
				<el-table-column prop="pickupNo" label="提货码" width="200"></el-table-column>
				<el-table-column prop="pickupTime" label="提货时间" :formatter="forDate" width="150"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="140">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="openOrderDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-size="pageSize"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<el-dialog title="订单详情" width="1000px" :visible.sync="isShowDetail" :before-close="closeOrderDetail">
				<div class="form-area">
					<el-form label-width="120px" style="height:auto">
						<el-row>
							<el-col :span="12">
								<el-form-item label="订单编号">
									<el-input v-model="orderDetail.orderNo" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="下单时间">
									<el-input :value="forDateFilter(orderDetail.createTime)" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="订单金额">
									<el-input :value="orderDetail.couponQuantityTotal + '券'" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="订单状态">
									<el-input :value="orderDetail.pickupStatus ? '待提货' : '已完成'" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="会员昵称">
									<el-input v-model="orderDetail.consigneeName" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="会员手机号">
									<el-input v-model="orderDetail.consigneePhone" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="提货门店">
									<el-input v-model="orderDetail.pickupName" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="门店地址">
									<el-input v-model="orderDetail.pickupAddress" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="门店电话">
									<el-input v-model="orderDetail.pickupPhone" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="营业时间">
									<el-input v-model="orderDetail.pickupBusinessHours" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					
					<div class="product-detail">
						<el-table :data="productDetail" stripe border style="width: 100%">
							<el-table-column label="商品信息">
								<template slot-scope="scope">
									<div class="sku-info">
										<div class="sku-image">
											<el-image style="width: 80px; height: 80px;" :src="scope.row.skuThumbImage"></el-image>
										</div>
										<div class="sku-details">
											<h3>{{scope.row.productName}}</h3>
											<p>{{scope.row.skuName}}</p>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="商品条码" prop="productBarCode" width="160"></el-table-column>
							<el-table-column label="单位" prop="unitName" width="80" align="center"></el-table-column>
							<el-table-column label="单价" width="120"align="center">
								<template slot-scope="scope">
									{{scope.row.couponQuantity}}券
								</template>
							</el-table-column>
							<el-table-column label="兑换数量" prop="quantity" width="90" align="center"></el-table-column>
							<el-table-column label="订单总价" width="120" align="center">
								<template slot-scope="scope">
									{{scope.row.couponQuantityTotal}}券
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				
				<div class="dialog-footer" slot="footer">
					<el-button @click="closeOrderDetail">关 闭</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getExchangeOrderList } from '@api/order/order'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				queryForm: {
					orderNo: '',
					userPhone: '',
					pickupStatus: '',
					timeType: '',
					timeBegin: '',
					timeEnd: '',
				},
				time: [],
				
				loading: false,
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				isShowDetail: false,
				orderDetail: '',
				productDetail: [],
			}
		},
		methods: {
			fetchData() {
				if(this.loading) {
					return;
				}
			
				if (this.queryForm.timeType == '' && this.time[0] != null) {
					this.$message({
						message: '请选择时间类型',
						type: 'warning'
					});
					return;
				}
				if (this.queryForm.timeType != '' && this.time[0] == null) {
					this.$message({
						message: '请选择时间范围',
						type: 'warning'
					});
					return;
				}
				this.loading = true;
				this.queryForm.timeBegin = this.time[0] == null ? null : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.queryForm.timeEnd = this.time[1] == null ? null : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				
				getExchangeOrderList({
					orderNo: this.queryForm.orderNo,
					userPhone: this.queryForm.userPhone,
					pickupStatus: this.queryForm.pickupStatus,
					timeType: this.queryForm.timeType,
					timeBegin: this.queryForm.timeBegin,
					timeEnd: this.queryForm.timeEnd,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			
			submitForm(formName) {
				this.resetPage();
				this.fetchData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.fetchData();
			},
			
			forDate(row, column) {
				var formatTime = ''
				if (column.property == 'createTime') {
					formatTime = row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'payTime') {
					formatTime = row.payTime == null ? '-' : dayjs(row.payTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if (column.property == 'pickupTime') {
					formatTime = row.pickupTime == null ? '-' : dayjs(row.pickupTime).format('YYYY-MM-DD HH:mm:ss');
				}
				return formatTime;
			},
			forDateFilter(val) {
				var formatTime = ''
				formatTime = val == null ? '-' : dayjs(val).format('YYYY-MM-DD HH:mm:ss');
				return formatTime;
			},
			
			openOrderDetail(item) {
				this.orderDetail = item;
				this.productDetail = [item];
				this.isShowDetail = true;
			},
			closeOrderDetail() {
				this.isShowDetail = false;
			}
		},
		mounted() {
			this.fetchData();
		}
	}
</script>

<style lang="scss" scoped>
	.product-detail {
		width: 100%;
		margin-top: 30px;
		.sku-info {
			width: 100%;
			display: flex;
			.sku-image {
				width: 80px;
				height: 80px;
				flex: 0 0 80px;
			}
			.sku-details {
				flex: 1 1 auto;
				h3 {
					font-size: 14px;
					color: #333;
					padding-left: 30px;
				}
				p {
					font-size: 14px;
					color: #999;
					margin-top: 4px;
					padding-left: 30px;
				}
			}
		}
		.sku-summary {
			border: #ebeef5 1px solid;
			border-top: none;
			justify-content: flex-end;
			display: flex;
			padding: 20px;
			.sku-summary-content {
				width: 240px;
				p {
					width: 100%;
					font-size: 14px;
					color: #333;
					justify-content: space-between;
					display: flex;
					margin: 5px 0;
				}
				span {
					font-size: 14px;
				}
				span.sku-summary-text {
					font-size: 18px;
					font-weight: bold;
					color: #ff5642;
				}
			}
		}
	}
</style>